import React, { PureComponent } from 'react';
import { Table,Avatar,Button} from 'antd';
import styles from './index.less';

class FollowerTable extends PureComponent {
  state = {
    selectedRowKeys: [],
    totalCallNo: 0,
    followerData:[],
    pageNo:0,
    pageSize:0,
    total:0
  };

  componentWillReceiveProps(nextProps) {
    if(nextProps.followerData.length != 0){
      const { followerData: {errorCode,msg,data:{pageNo,pageCount,total,pageSize,list}}, loading } = nextProps;
      this.setState({
        followerData:list,
        pageNo:pageNo,
        pageSize:pageSize,
        total:total
      });

      if (nextProps.selectedRows.length === 0) {
        this.setState({
          selectedRowKeys: [],
          totalCallNo: 0,
        });
      }
    }
  }

  //选中的时候处理选中的id
  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    const totalCallNo = selectedRows.reduce((sum, val) => {
      return sum + parseFloat(val.callNo, 10);
    }, 0);

    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }
    this.setState({ selectedRowKeys, totalCallNo });
  }

  //table分页、排序、筛选变化时触发
  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  }

  delFollower = (record,index) => {
    this.props.delFollower(record,index);
    // const followerData = this.state.followerData;
    // console.log('delFollower')
    // console.log(followerData)
    // followerData.splice(index,1);
    // this.setState({
    //   followerData:followerData.concat([])
    // });
  }

  delFollowers = () => {
    const selectedRowKeys = this.state.selectedRowKeys;
    const ids = selectedRowKeys.toString();
    this.props.delFollowers(ids);
  }

  handleGenerateTitle= (total) => {
   return (
     <div>
          <Button type="danger" onClick={()=>this.delFollowers()}>删除</Button>
          <span style={{marginLeft:20}}>全部粉丝（{total}）</span>
     </div>
   );
  }
  render() {
    const { selectedRowKeys,followerData } = this.state;
    const { loading } = this.props;
    // console.log(this.state.followerData)
    const columns = [
      {
        title: '用户',
        dataIndex: 'nickName',
        render:(text, record, index) => (
          <div>
              <Avatar style={{ verticalAlign: 'middle' }} src={record.headImgUrl} />
              <span style={{ marginLeft: 6, verticalAlign: 'middle' }} >
                  {text}
              </span>
          </div>
        )
      },
      {
        title: '操作',
        render: (text,record,index) => (
          <div>
            <a onClick={()=>this.delFollower(record,index)}>删除</a>
          </div>
        ),
      },
    ];

    const paginationProps = {
      pageSize:this.state.pageSize,
      total:this.state.total,
      current:this.state.pageNo,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
    };

    return (
      <div className={styles.msgTable}>
        <Table
          title={() => this.handleGenerateTitle(this.state.total)}
          loading={loading}
          rowKey={record => record.id}
          rowSelection={rowSelection}
          dataSource={this.state.followerData}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}

export default FollowerTable;
